<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="优惠券编号">
            <br> <br>
                <el-input v-model="formInline.couponSeq" placeholder="优惠券编号" style="margin-left:-100px;width:200px"></el-input>
            </el-form-item>
            <el-form-item label="优惠券名称">
            <br> <br>
                <el-input v-model="formInline.couponName" placeholder="优惠券名称" style="margin-left:-100px;width:200px"></el-input>
            </el-form-item>
            <el-form-item style="margin-left:700px;text-align:right">
                <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
                <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            v-loading="loading"
            border
              height="400px"
            style="width: 100%;height:500px"
            :header-cell-style="{background:'#ebecf0',color:'#606266'}"
        >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column prop="couponSeq" label="优惠券编号" header-align="left" width="150"></el-table-column>
            <el-table-column prop="couponName" label="优惠券名称" header-align="left" width="220"></el-table-column>
            <el-table-column prop="couponMoney" label="优惠券面值" header-align="left" width="160">
                <template slot-scope="scope">
                    <span v-if="scope.row.discountType == 0">
                      满{{scope.row.conponLimitMoney}}减{{scope.row.couponMoney}}元
                    </span>
                    <span v-if="scope.row.discountType == 1">
                      折扣{{scope.row.couponDiscount}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="orgCount" label="门店数量" header-align="right" width="120"></el-table-column>
            <el-table-column prop="couponSum" label="总发行数量" header-align="right" width="120"></el-table-column>
            <el-table-column prop="couponReceive" label="总领取数量" header-align="right" width="120"></el-table-column>
            <el-table-column prop="couponUse" label="总使用数量" header-align="right" width="120"></el-table-column>
            <el-table-column prop="couponSurplus" label="总剩余数量" header-align="right" width="120"></el-table-column>
            <el-table-column
                label="操作"
                width="180"
                align="center"
                header-align="center"
                fixed="right"
            >
                <template slot-scope="scope">
                    <el-button type="text" @click="toEdit(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>

        <el-dialog title="门店详情" :visible.sync="dialogVisible" width="65%">
          <el-form :inline="true" :model="formInlineDetail" class="demo-form-inline">
              <el-form-item label="门店授权码">
                  <el-input v-model="formInlineDetail.authCode" placeholder="门店授权码" style="margin-left:-100px;width:200px"></el-input>
              </el-form-item>
              <el-form-item label="店铺名称">
                  <el-input v-model="formInlineDetail.storeName" placeholder="店铺名称" style="margin-left:-100px;width:200px"></el-input>
              </el-form-item>
              <el-form-item style="margin-left:300px;text-align:right">
                  <el-button type="primary" icon="el-icon-search" @click="searchDetail()" size="mini">查询</el-button>
                  <el-button type="primary" @click="kongDetail()" size="mini" icon="el-icon-delete">清空</el-button>
              </el-form-item>
          </el-form>

            <el-table
                :data="orgList"
                border
                style="font-size: 10px;width:100%;"
                height="330"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column prop="authCode" label="门店授权码" header-align="left" width="150"></el-table-column>
            <el-table-column prop="storeName" label="店铺名称" header-align="left" width="220"></el-table-column>
            <el-table-column prop="couponSum" label="总发行数量" header-align="right" width="120"></el-table-column>
            <el-table-column prop="couponReceive" label="总领取数量" header-align="right" width="120"></el-table-column>
            <el-table-column prop="couponUse" label="总使用数量" header-align="right" width="120"></el-table-column>
            <el-table-column prop="couponSurplus" label="总剩余数量" header-align="right" width="120"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChangeDetail"
                    @current-change="handleCurrentChangeDetail"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :current-page="listQueryDetail.current"
                    :page-size="listQueryDetail.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalDetail"
                ></el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import {
  queryCouponStatistics,
  queryCouponStatisticsOrg
} from "@/api/promotionProgramEdit";

export default {
  data() {
    return {
      loading: true,
      formInline: {
        couponName: "",
        couponSeq: ""
      },
      formInlineDetail: {
        authCode: "",
        storeName: ""
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      totalDetail: 0,
      listQueryDetail: {
        current: 1,
        size: 100
      },
      curUuid: "",
      tableData: [],
      orgList: [],
      dialogVisible: false
    };
  },
  mounted() {
    this.couponList();
  },
  methods: {
    kong() {
      this.formInline.couponName = "";
      this.formInline.couponSeq = "";
    },
    kongDetail() {
      this.formInlineDetail.couponName = "";
      this.formInlineDetail.status = "";
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.couponList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.couponList();
    },
    handleSizeChangeDetail(val) {
      this.listQueryDetail.size = val;
      this.couponListDetail();
    },
    handleCurrentChangeDetail(val) {
      this.listQueryDetail.current = val;
      this.couponListDetail();
    },
    search() {
      this.listQuery.current = 1;
      this.couponList();
    },
    searchDetail() {
      this.listQueryDetail.current = 1;
      this.couponListDetail();
    },
    toEdit(item) {
      this.listQueryDetail.current = 1;
      this.dialogVisible = !this.dialogVisible;
      this.curUuid = item.couponId;
      this.couponListDetail();
    },
    couponList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          couponSeq: this.formInline.couponSeq,
          couponName: this.formInline.couponName
        },
        ascs: [],
        descs: []
      };
      queryCouponStatistics(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    couponListDetail() {
      let data = {
        size: this.listQueryDetail.size,
        current: this.listQueryDetail.current,
        condition: {
          couponId: this.curUuid,
          authCode: this.formInlineDetail.authCode,
          storeName: this.formInlineDetail.storeName
        },
        ascs: [],
        descs: []
      };
      queryCouponStatisticsOrg(data).then(res => {
        this.loading = false;
        this.orgList = res.records;
        this.totalDetail = res.total;
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  }
};
</script>
<style lang="less" scoped>
.toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
}
.el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
}
.demo-form-inline {
    // border: 1px solid #ebeef5;
    padding: 20px 10px 0px 30px;
}

.partUl {
    overflow: hidden;
    width: 100%;
    margin-left: 0px;
    margin-top: 20px;
}
.emptyLi {
    text-align: center;
    padding-top: 100px;
    font-size: 14px;
    color: #d6d6d6;
}
.partLi {
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}
.partDiv {
    border: 1px solid #ffcc00;
    border-radius: 10px;
    width: 250px;
    text-align: center;
}
.partDivBg1 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg1.png");
}
.partDivBg2 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg2.png");
}
.partDivBg3 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg3.png");
}
.partDiv0 {
    margin-top: 5px;
    text-align: right;
    float: right;
    padding-right: 5px;
    padding-top: 2px;
    background-color: transparent;
}
.partDiv1 {
    color: #fff;
    line-height: 20px;
    padding: 15px;
    padding-left: 10px;
    padding-top: 45px;
}
.partDivNum {
    color: #fff;
    line-height: 30px;
    padding: 0px;
    padding-right: 10px;
    text-align: right;
    background-color: #f27e7a;
}
.partDiv2 {
    background-color: #f9faf9;
    line-height: 30px;
    padding: 20px;
    font-size: 12px;
}
.partButton {
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background-color: transparent;
}
.partDivF {
    float: left;
    width: 5px;
    height: 5px;
    border-radius: 0px 0px 5px 0px;
}
.partDivC {
    float: left;
    width: 10px;
    height: 5px;
    border-radius: 0px 0px 5px 5px;
}
.partDivE {
    float: right;
    width: 5px;
    height: 5px;
    border-radius: 0px 0px 0px 5px;
}
.triangle {
    overflow: hidden;
    position: static;
}
.triangle-back {
    position: absolute;
    border-top: 60px solid #f44336;
    border-right: 60px solid #f27e7a;
}
.triangle-text {
    overflow: hidden;
    width: 40px;
    font-size: 12px;
    color: #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    padding-top: 14px;
    margin-left: -5px;
}
.partDiv-One > .partDiv1 {
    background-color: #f27e7a;
}
.partDiv-One > .partDivSmall > .partDivF,
.partDiv-One > .partDivSmall > .partDivC,
.partDiv-One > .partDivSmall > .partDivE {
    background-color: #f27e7a;
}
.partDiv-One > .partDiv2 {
    background-color: #f9faf9;
    color: #f27e7a;
}
.partDiv-One .partButton {
    border: 2px solid #f27e7a;
    color: #f27e7a;
}
.partDiv-Two > .partDiv1,
.partDiv-Two > .partDivSmall > .partDivF,
.partDiv-Two > .partDivSmall > .partDivC,
.partDiv-Two > .partDivSmall > .partDivE {
    background-color: #74d3d3;
}
.partDiv-Two > .partDiv2 {
    background-color: #f9faf9;
    color: #74d3d3;
}
.partDiv-Two .partButton {
    border: 2px solid #74d3d3;
    color: #74d3d3;
}
.partDiv-Three > .partDiv1,
.partDiv-Three > .partDivSmall > .partDivF,
.partDiv-Three > .partDivSmall > .partDivC,
.partDiv-Three > .partDivSmall > .partDivE {
    background-color: #85c1e9;
}
.partDiv-Three > .partDiv2 {
    background-color: #f9faf9;
    color: #85c1e9;
}
.partDiv-Three .partButton {
    border: 2px solid #85c1e9;
    color: #85c1e9;
}
.partDiv-One > .triangle > .triangle-back {
    border-right: 60px solid #f27e7a;
}
.partDiv-Two > .triagnle > .triangle-back {
    border-right: 60px solid #74d3d3;
}
.partDiv-Three > .triagnle > .triangle-back {
    border-right: 60px solid #85c1e9;
}
</style>